<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/7/14
  Time: 18:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>用户管理</title>
      <%--引入jquery--%>
      <%--直接用网址，--%>
      <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
     <%-- <script type="text/javascript" src="js/jq(1).js"></script>--%>
      <script>
          $(function () {
              //初始化用户数据
              getData();
              //添加用户  点击按钮事件  用id确定哪个位置
              //获取数据  将数据封装到javaScript中的data对象中  最后发送请求
              $("#add").click(function () {
                  //实现添加用户方法还是更新用户，取决于传入来的参数
                  addOrUpdateUser("addUser")

              })
              //更新用户
              $("#update").click(function () {
                  addOrUpdateUser("updateUser")
              })

          })
          //初始化用户数据
          function getData() {
              /*用getJson 请求数据，反回的是Json数据  请求地址  参数（方便在其他地方获得参数，调用该方法）  回调函数的处理*/
              $.getJSON("user.do",{flag:"getData"},function (result) {
                listUser(result);
              });
          }

          //添加或更新用户
          //获取用户输入的数据   将上面的方法中的参数传到flag中
          function addOrUpdateUser(flag) {
              var userid = $("#id").val();
              var username = $("#username").val();
              var password = $("#password").val();
              var salary = $("#salary").val();
              var birthday = $("#birthday").val();

              //将数据放进data对象
              var data = {
                  //将数据传递进来
                  userid:userid,
                  username:username,
                  password:password,
                  salary:salary,
                  birthday:birthday,
                  flag:flag
              };
              //发送请求 请求地址，请求参数  将结果回调 重新加载前端页面
              $.get("user.do",data,function (result) {
                    alert(result);
                    //刷新
                  location.reload();
              })
          }
          //把选要更新的数据，传到上方的表格中，再进行修改
          function preUpdateUser(userid) {
            var arr = new Array();
            //根据这行的userid 进行取值，因为id是唯一性
              //遍历选中行中的数据
              $("#"+userid).closest("tr").children().each(function (index,ele) {
                    if(index <=4){
                        arr[index] = ele.innerText;
                    }
              })
              //设置编辑区或中的用户数据
              $("#id").val(arr[0]);
              $("#id").attr("readonly",true);//设为不可编缉
              $("#username").val(arr[1]);
              $("#password").val(arr[2]);
              $("#salary").val(arr[3]);
              $("#birthday").val(arr[4]);
          }
          //遍历用户数据，拼接成html
          function listUser(obj) {
              var str="";
              $.each(obj,function () {
                  str +="<tr align='center'>"+
                      "<td id='"+this.id+"'>"+this.id+"</td>"+
                      "<td id='"+this.username+"'>"+this.username+"</td>"+
                      "<td id='"+this.password+"'>"+this.password+"</td>"+
                      "<td id='"+this.salary+"'>"+this.salary+"</td>"+
                      "<td id='"+this.birthday+"'>"+this.birthday+"</td>"+
                      "<td><a href='#' onclick='preUpdateUser("+this.id+")'>更新</a>&nbsp;&nbsp;<a href='#' onclick='deleteuser("+this.id+")'>删除</a></td></tr>";
              });
              //把数据放进tbody中  id选器
              $("#tbody").prepend(str);
          }
          //删除用户   不在上面的$(function() { getData() .....;}) 中定义
          // userid 是上面的this.id 传进来   上面的onclick 是点击生效
          function deleteuser(userid) {
              $("#"+userid).closest("tr").remove();
              //发送请求到后端  请求地址  参数  回调函数
              $.post("user.do",{userid:userid,flag:"delete"},function (result) {
                  alert(result);

              })
          }
      </script>
  </head>
  <body>
    <div>
        <table align="center" width="68%" border="1">
            <tr>
                <td>ID: </td>
                <td><input type="text" name="id" id="id"></td>
                <td>姓名：</td>
                <td><input type="text" name="username" id="username"></td>
                <td>密码：</td>
                <td><input type="password" name="password" id="password"></td>
            </tr>
            <tr>
                <td>收入：</td>
                <td><input type="text" name="salary" id="salary"></td>
                <td>出生日期：</td>
                <td><input type="date" name="birthday" id="birthday"></td>
                <td colspan="2"></td>
            </tr>
            <tr align="center">
                <td colspan="6">
                    <input type="button" value="添加用户" id="add">
                    <input type="button" value="更新用户" id="update">
                </td>
            </tr>
        </table>
        <hr>
        <table align="center" width="60%" bgcolor="" border="1" id="myTable">
            <thead>
            <tr align="center">
                <td>ID</td>
                <td>姓名</td>
                <td>密码</td>
                <td>收入</td>
                <td>生日</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
    </div>
  </body>
</html>
